<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录</title>
    <link href="static/js/plugin/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <link href="static/css/signin.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="static/js/html5shiv.min.js"></script>
    <script src="static/js/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        .tips {
            text-align:center;color:#C80101;height:50px;line-height:50px;font-size:16px;
        }
    </style>
</head>

<body>
<div class="banner">
    <div class="login-container">
        <form class="form-signin" id="form">
            <h2 class="form-signin-heading">请登录</h2>
            <label for="account" class="sr-only">账号</label>
            <input type="text" id="account" class="form-control" name="account" value="admin" placeholder="账号" required autofocus>
            <label for="password" class="sr-only">密码</label>
            <input type="password" id="password" class="form-control" name="pwd" value="123456" placeholder="密码" required>
            <div class="validator-code" th:if="${session.loginVcode != null}">
                <input type="text" id="verificationCode" class="form-control" name="vcode" placeholder="验证码" size="5" required>
                <img id="vcode" src="vcode" style="cursor:pointer;"/>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" value="remember-me">记住账号
                </label>
            </div>
            <a href="javascript:void(0)" class="btn btn-lg btn-primary btn-block" id="login">登录</a>
            <div class="tips">
                <span  id="tips"></span>
            </div>
        </form>
    </div> <!-- /login-container -->
    <div id="login_footer">
        Copyright &copy; 2017 www.yaoxun.com Inc. All Rights Reserved.
    </div>
</div>

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script type="text/javascript" src="static/js/plugin/jquery/jquery.min.js"></script>
<script src="static/js/ie10-viewport-bug-workaround.js"></script>
<script type="text/javascript" src="static/js/mprs-cookie.js"></script>
<script type="text/javascript" src="static/js/common/common.js"></script>
<script type="text/javascript" src="static/js/plugin/layer/layer.js"></script>
<script type="text/javascript">
window.onload = function(){
    var account = mprsCookie.getCookie('myadmin.login.account');
    if(!validation.isEmpty(account)) {
        $('#account').val(account);
    }
};
$(function(){
	$('#vcode').click(function(){
		$(this).attr('src', 'vcode?time'+new Date());
	});
	
	function focus(id) {
		$('#'+id).focus().val('');
	}
	
	$('#login').click(function() {
		var json = $('#form').serializeJson();
		if(validation.isEmpty(json.account)) {
			layer.msg('请输入账号');
			focus('account');
			return false;
		}
		if(validation.isOverLength(json.account, 18)) {
			layer.msg('输入18位以内的账号');
			focus('account');
			return false;
		}
		if(validation.isEmpty(json.pwd)) {
			layer.msg('请输入密码');
			focus('password');
			return false;
		}
		if(validation.isOverLength(json.pwd, 18)) {
			layer.msg('输入18位以内的密码');
			focus('password');
			return false;			
		}
		if(json.hasOwnProperty('vcode')) {
			if(validation.isEmpty(json.vcode) || json.vcode.length != 5) {
				layer.msg('请输入正确的验证码');
				focus('verificationCode');
				return false;
			}
		}
		$.loadReq({
			type:'post',
			url:'login',
			data:json,
			success: function(res) {
				if(res.status == 'true') {
					window.location.href = 'index';
				}
			}
		});
	});
});
</script>
</body>
</html>
